import { RightOutlined } from "@ant-design/icons";
import { Button, Card, Col, List, Row, Space, Tabs } from "antd";
import "./index.less";

const { TabPane } = Tabs;

const MyAccount = () => {
    return (
        <Space direction="vertical" size={24} style={{ width: "100%" }}>
            <Card>
                <Row style={{ justifyContent: "space-between", flexWrap: "nowrap" }}>
                    <Card className="user-space-nav-card">
                        我的账号密码
                    </Card>
                    <Card className="user-space-nav-card">
                        我的登录保护
                    </Card>
                    <Card className="user-space-nav-card">
                        我的绑定手机
                    </Card>
                    <Card className="user-space-nav-card">
                        我的绑定邮箱
                    </Card>
                </Row>
            </Card>
            <Card>
                <Tabs defaultActiveKey="1">
                    <TabPane tab="登录记录" key="1">
                        <List>
                            <List.Item>记录一</List.Item>
                            <List.Item>记录一</List.Item>
                            <List.Item>记录一</List.Item>
                            <List.Item>记录一</List.Item>
                        </List>
                        <Button style={{padding: 0}} type="link">
                            查看全部<RightOutlined />
                        </Button>
                    </TabPane>
                    <TabPane tab="敏感记录" key="2">
                        Content of Tab Pane 2
                    </TabPane>
                </Tabs>
            </Card>
            <Row>
                <Col span={12}>
                    <Card>
                        账号注销
                    </Card>
                </Col>
                <Col span={12}>
                    <Card>
                        账号注销
                    </Card>
                </Col>
            </Row>

        </Space>
    )
}


export default MyAccount;



